<template>
    <div class="main set-partner">
        <div class="section">
            <div class="search-bar">
                <div class="form-item">
                    <div class="item-title">请选择省:</div>
                    <el-select v-model="province">
                        <el-option v-for="item of provinceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="form-item">
                    <div class="item-title">数量:</div>
                    <el-input v-model="cityNum" @keyup.enter.native="setCity"></el-input>
                    <p class="error-tip" v-if="cityNumTip" v-text="cityNumTip"></p>
                </div>
                <div class="form-item" v-if="rightsButtons['setPartnerCity']">
                    <el-button type="success" :loading="btnDisabled1" @click="setCity">设置城市数量</el-button>
                </div>
            </div>
            <el-table :data="cityList" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" label="省" prop="parentName"></el-table-column>
                <el-table-column align="center" label="城市" prop="name"></el-table-column>
                <el-table-column align="center" label="数量" prop="number"></el-table-column>
            </el-table>
            <div class="search-bar">
                <div class="form-item">
                    <div class="item-title">请选择市:</div>
                    <el-select v-model="city">
                        <el-option v-for="item of cityList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </div>
                <div class="form-item">
                    <div class="item-title">数量:</div>
                    <el-input v-model="areaNum" @keyup.enter.native="setArea"></el-input>
                    <p class="error-tip" v-if="areaNumTip" v-text="areaNumTip"></p>
                </div>
                <div class="form-item" v-if="rightsButtons['setPartnerRegion']">
                    <el-button type="success" :loading="btnDisabled2" @click="setArea">设置区/县数量</el-button>
                </div>
            </div>
            <el-table :data="areaList" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>
                <el-table-column align="center" label="省" prop="grandParentName"></el-table-column>
                <el-table-column align="center" label="城市" prop="parentName"></el-table-column>
                <el-table-column align="center" label="区/县" prop="name"></el-table-column>
                <el-table-column align="center" label="数量" prop="number"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    
    export default {
        name: 'setPartner',
        data() {
            return {
                list: [],
                provinceList: [],
                province: '',
                cityList: [],
                city: '',
                cityNum: '',
                cityNumTip: '',
                areaList: [],
                area: '',
                areaNum: '',
                areaNumTip: '',
                listLoading: false,
                btnDisabled1: false,
                btnDisabled2: false
            }
        },
        watch: {
            province(val) {
                this.getCityList(val);
            },
            city(val) {
                this.getAreaList(val);
            },
            cityNum(val){
                this.cityNumTip = /^[0-9]\d*$/.test(val) ? '' : '请输入整数';
            },
            areaNum(val){
                this.areaNumTip = /^[0-9]\d*$/.test(val) ? '' : '请输入整数';
            }
        },
        created() {
            this.getProvinceList();
        },
        methods: {
            // 获取省
            getProvinceList() {
                this.request({
                    url: '/bsnl-manage/manage/region/query',
                    method: 'post',
                    data: {
                        parentId: 0,
                        page: 1,
                        pageSize: 99
                    }
                }).then(({data}) => {
                    this.provinceList = data;
                    this.province = data[0].id;
                }).catch(err => {
                    this.provinceList = [];
                });
            },
            // 获取市
            getCityList(id) {
                if (!id) {
                    this.cityList = [];
                    this.city = '';
                    return false;
                }
                this.request({
                    url: '/bsnl-manage/manage/region/second/' + id,
                    method: 'get',
                }).then(({data}) => {
                    this.cityList = data;
                    this.city = data[0].id;
                }).catch(err => {
                    this.cityList = [];
                    this.city = '';
                });
            },
            // 获取区
            getAreaList(id) {
                if (!id) {
                    this.areaList = [];
                    this.area = '';
                    return false;
                }
                this.request({
                    url: '/bsnl-manage/manage/region/secondThird/' + id,
                    method: 'get',
                }).then(({data}) => {
                    this.areaList = data;
                    this.area = data[0].id;
                }).catch(err => {
                    this.areaList = [];
                    this.area = '';
                });
            },
            // 设置城市数量
            setCity() {
                if(this.cityNumTip || !/^[0-9]\d*$/.test(this.cityNum)){
                    return this.cityNumTip = '请输入整数';
                }
                this.btnDisabled1 = true;
                this.request({
                    url: `/bsnl-manage/manage/partner/region/setting/set/num/city/${this.province}/${this.cityNum}`,
                    method: 'post'
                }).then(() => {
                    this.btnDisabled1 = false;
                    this.$message.success('设置成功');
                    for(let item of this.cityList){
                        item.number = this.cityNum;
                    }
                }).catch(err => {
                    this.btnDisabled1 = false;
                });
            },
            // 设置区数量
            setArea() {
                if(this.areaNumTip || !/^[0-9]\d*$/.test(this.areaNum)){
                    return this.areaNumTip = '请输入整数';
                }
                this.btnDisabled2 = true;
                this.request({
                    url: `/bsnl-manage/manage/partner/region/setting/set/num/area/${this.city}/${this.areaNum}`,
                    method: 'post'
                }).then(() => {
                    this.btnDisabled2 = false;
                    this.$message.success('设置成功');
                    for(let item of this.areaList){
                        item.number = this.areaNum;
                    }
                }).catch(err => {
                    this.btnDisabled2 = false;
                });
            }
        }
    }
</script>
<style lang="scss">
    @import '../../../styles/variables';
    
    .set-partner{
        .search-bar{
            padding: 20px 0;
        }
    }
</style>